<!--
 * @Date: 2024-06-18 09:59:54
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2024-10-23 13:58:21
 * @Description: 头部工具栏
-->
<template>
  <div class="panel-header-toolbar">
    <div class="toolbar-item left">
      <div class="left-item">
        <div class="left-item-label">{{ label }}</div>
        <el-input class="left-item-content" disabled :value="value" />
      </div>
    </div>
    <div class="toolbar-item right">
      <template v-for="(item, index) in toolbarEnums" :key="index">
        <el-button
          v-if="item.visible"
          :type="item.type"
          @click.stop="toolbarHandle(item)"
        >
          {{ item.name }}
        </el-button>
      </template>
    </div>
  </div>
</template>

<script setup>

const emits = defineEmits([
  'cancel', 'confirm', 'tempSave',
])
const props = defineProps({
  label: { type: String, default: '单位名称' },
  value: { type: String, default: '暂无' },
  showTempSave: { type: Boolean, default: true }
})

const toolbarEnums = {
  'ZC': { name: '暂存', type: 'default', emit: 'tempSave', visible: props.showTempSave },
  'QD': { name: '确定', type: 'primary', emit: 'confirm', visible: true },
  'QX': { name: '取消', type: 'danger', emit: 'cancel', visible: true },
}
const toolbarHandle = (item) => {
  emits(item.emit)
}

</script>

<style lang="scss" scoped>
.panel-header-toolbar {
  display: flex;
  height: 60px;
  .toolbar-item {
    flex: 1;
		display: flex;
		height: 100%;
		align-items: center;
		box-sizing: border-box;
		padding: 0 15px;
    &.left {
      justify-content: left;
      .left-item {
				display: flex;
				align-items: center;
				width: 50%;
				.left-item-label {
					width: 80px;
				}
				.left-item-content {
					flex: 1;
				}
			}
    }
    &.right {
      justify-content: right;
    }
  }
}
</style>